<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-for -->
        <!-- <ul>
            <li v-for="item in items">{{item}}</li>
        </ul> -->

        <!-- 模板 -->
        <!-- <div id="app">
            <ul>
                <li v-for="(value,key,index) in object">
                    {{index}}.{{key}}-{{value}}
                </li>
            </ul>
            
        </div> -->

        <!-- v-text输出文本   v-html 输出html -->
        <!-- <div v-text="msgHtml"></div> -->
        
        <!-- v-on 常用方法 -->
        <!-- <div>本次得分{{count}}</div>
        <button v-on:click="add">加分1</button> -->
        <!-- 缩写 -->
        <!-- <button @click="add">加分2</button> -->

        <!-- v-model  需要在data中声明初始值 -->
        <!-- <input type="text" v-model="message">
        <textarea name="message" id="" cols="30" rows="10"></textarea> -->

        <!-- checkbox -->
        <!-- <input type="checkbox" id="first" value="1" v-model="status">
        <label for="first">有效</label>
        <input type="checkbox" id="second" value="2" v-model="status">
        <label for="second">无效</label>
        <div>状态{{status}}</div> -->

        <!-- select -->
        <!-- <select name="" id="selected">
            <option disabled value="">请选择</option>
            <option value="">A</option>
            <option value="">B</option>
            <option value="">C</option>
            <option value="">D</option>
        </select>
        <div>selectd:{{selected}}</div> -->

        <!-- v-bind         -->
        <!-- <img v-bind:src="imgSrc" width="200px" alt=""> 
             <img :src='imgSrc'>
        -->

        <!-- v-pre/v-cloak/v-once -->
        <div v-pre>{{message}}</div>   <!--跳过编译 ，直接输入原始值-->
        <div v-cloak>{{message}}</div> <!--DOM渲染完了 再显示-->
        <div v-once>第一次绑定的值：{{message}}</div><!--只显示第一次提交的值-->
    </div>

    

    <script>
    // var app = new Vue({
    //     el:'#app',
    //     data:{
    //         items:[20,23,18,65]
    //     }
    // })


    // var app= new Vue({
    //     el:'#app',
    //     data:{
    //         object:{
    //             firstName:'john',
    //             lastName:'Doe'
    //         }
    //     }
    // })

        // var app = new Vue({
        //     el:'#app',
        //     data:{
        //         msgHtml:'LR  hello world'
        //     }
        // })
        

        // var app = new Vue({
        //     el:'#app',
        //     data:{
        //         count:1
        //     },
        //     methods:{
        //         add(){
        //             this.count++;
        //         }
        //     }
        // })

        // var app = new Vue({
        //     el:'#app',
        //     data:{
        //         count:1,
        //         status:[],
        //         sex:'男',
        //         selected:''
        //     }
        // })

        // var app = new Vue({
        //     el:'#app',
        //     data:{
        //         imgSrc:"http://liangxinghua.com/uploads/image/20180709/1531106987.png"
        //     }
        // })

        var app = new Vue({
            el:'#app',
            data:{
                message:"liurui"
            }
        })
    </script>
</body>
</html>